<template>
	<!-- 寄售 -->
	<u-popup :show="show" @close="closeFun" mode="bottom" round="32">
		<view class="">
			<view class="popup__title tc fs28 fw500">优惠券</view>
			<view class="coupon px30">
				<block v-for="item in 7" :key="item">
					<view class="coupon-item">
						<view class="coupon-item__main flex_y mt20">
							<view class="coupon-item__left fjc pr" data-title="满119元可用">
								<text class="t_FF7803 fs60 fwb">¥59</text>
								<view class="coupon-item__tag fjc fs18 t_fff">抽盒券</view>
							</view>
							<view class="coupon-item__right px30 circle_fff_top"
								:class="[ showRule ? 'circle_80808A_bottom' : 'circle_fff_bottom']">
								<view class="">
									<view class="t_fff fs28" style="line-height: 28rpx;padding-top: 32rpx;">商城专属优惠券
									</view>
									<view class="fs22"
										style="color: rgba(255, 255, 255, .5);letter-spacing: 0.64rpx;padding-top: 32rpx;">
										2023.03.02 - 2023.03.02</view>
								</view>
								<view class="fs24 t_fff fw500 fsc" style="line-height: 24rpx;"
									@click="showRule = !showRule">
									<view>使用说明</view>
									<image style="width: 24rpx;height: 24rpx;"
										src="/static/images/icon/order_arrow_top.png" mode="aspectFill" />
								</view>
								<view class="right__box">
									<view class="uncheck40"></view>
								</view>
							</view>
						</view>
						<view class="coupon-item__rule px30 fs20 " :class="[showRule ? 'height140':'']"
							v-if="item === 0">
							<text
								class="ellipsis-2 my20 lh32 ">使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则</text>
						</view>
					</view>
				</block>
			</view>
			<view class="footer">
				<view class="footer__box ios-bottom px24 fsc">
					<view class="">优惠：<text class="fw600 t_FF7803 fs32">￥15.00</text></view>
					<view class="footer__btn fjc fs28" @click="gopage">确认选择</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: Boolean,

		},
		data() {
			return {
				showRule: false
			}
		},
		methods: {
			closeFun() {
				this.$emit('close')
			},
			goPages(e) {
				let url = e.currentTarget.dataset.url
				uni.navigateTo({
					url
				})
				this.closeFun()
			}
		}
	}
</script>

<style lang="scss">
	@mixin circle_item ($color) {
		content: '';
		position: absolute;
		left: -18rpx;
		background: $color;
		width: 33rpx;
		height: 16rpx;
		border-radius: 16rpx 16rpx 0 0;
		line-height: 8rpx;
	}

	.height140 {
		height: 140rpx !important;
	}

	.circle_fff_bottom::before {
		@include circle_item(#fff);
		bottom: -2rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.circle_fff_top::after {
		@include circle_item(#fff);
		top: -2rpx;
		border-radius: 0 0 16rpx 16rpx;
	}

	.circle_80808A_bottom::before {
		@include circle_item(#80808A);
		bottom: -2rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.lh32 {
		line-height: 32rpx;
	}

	.popup__title {
		height: 96rpx;
		line-height: 96rpx;
	}

	.coupon {
		max-height: 602rpx;
		overflow-y: auto;

		.coupon-item {
			&__main {
				position: relative;
				width: 100%;
				height: 220rpx;
				border-radius: 16rpx;
				background: #2B2C3C;
				z-index: 1;
			}

			&__left {
				width: 194rpx;
				height: inherit;
			}

			&__left::after {
				content: attr(data-title);
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 24rpx;
				line-height: 24rpx;
				color: #fff;
				font-weight: normal;
				width: inherit;
				text-align: center;
			}

			&__tag {
				position: absolute;
				top: 0;
				left: 0;
				width: 90rpx;
				height: 38rpx;
				border-radius: 16rpx 0 16rpx 0;
				background: rgba(255, 255, 255, .1);
			}

			&__right {
				position: relative;
				width: 100%;
				height: inherit;
				padding-top: 12rpx;
				padding-bottom: 12rpx;
				border-left: 2rpx dashed rgba(255, 255, 255, 0.3);
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.right__box {
					position: absolute;
					top: 50%;
					right: 44rpx;
					transform: translateY(-50%);
				}
			}

			&__rule {
				height: 0;
				transition: all .7s;
				margin-top: -36rpx;
				padding-top: 36rpx;
				color: #fff;
				background: #80808A;
				border-radius: 0px 0px 16rpx 16rpx;
			}
		}
	}


	.footer {
		height: 104rpx;

		&__box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: inherit;
			background: #fff;
		}

		&__all {
			height: 40rpx;
			margin-right: 80rpx;

			&__circle {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
				border: 2rpx solid #666;
				border-radius: 50%;
			}
		}

		&__btn {
			width: 240rpx;
			height: 72rpx;
			border-radius: 48rpx;
			color: #fff;
			background: linear-gradient(270deg, #FC4C14 0%, #FD7303 100%);
		}
	}
</style>